<template>
    <div>
        <nav-bar :head="head"></nav-bar>
        <div style="height: 3rem"></div>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
            v-model="loading"
            :finished="finished"
            finished-text="我是有底线的"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
            @load="onLoad"
        >
            <van-cell v-for="(item,index) in list" :key="index"  >
                <div class="order-box" :style="{ opacity: item.status == 2 ?0.6:1 }">
                    <div class="userInfo">
                        <div class="user-left">
                            <div class="avatar">
                                <van-image
                                    round
                                    width="3rem"
                                    height="3rem"
                                    :src="item.product.product_image"
                                />
                            </div>
                            <div class="info">
                                <p class="nickname">{{ userInfo.user_name }}</p>
                                <p class="description">{{ item.created_at }}</p>
                            </div>
                        </div>
                        <div class="state-right">
                            <van-tag :type="item.status?(item.status == 1 ?'primary':'success'):'warning'" size="large">{{ item.status?(item.status == 1 ?'用户已付款':'平台已打款'):'用户待付款' }}</van-tag>
                        </div>
                    </div>
                    <div class="orderInfo">
                        <van-row>
                            <van-col span="8">商品名称：</van-col>
                            <van-col span="16">{{ item.product.product_name }}</van-col>
                        </van-row>
                        <van-row>
                            <van-col span="8">价格（RMB）：</van-col>
                            <van-col span="16"><b>￥{{ item.product.price_rmb }}</b></van-col>
                        </van-row>
                        <van-row>
                            <van-col span="8">价格（美元）：</van-col>
                            <van-col span="16"><b>${{ item.product.discount_price }}</b></van-col>
                        </van-row>
                        <van-row>
                            <van-col span="8">联系微信：</van-col>
                            <van-col span="16">{{ item.product.contact_wx }}</van-col>
                        </van-row>
                    </div>
                </div>
            </van-cell>
        </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import OrderSubmit from '../components/order-submit'
import Vue from 'vue';
import { List } from 'vant';
import { Cell, CellGroup } from 'vant';
import { Col, Row } from 'vant';
import exampleImg from '../assets/img/example.jpg'
import { Image } from 'vant';
import { Tag } from 'vant';
import { Toast } from 'vant';
import { PullRefresh } from 'vant';

Vue.use(PullRefresh);
Vue.use(Tag);
Vue.use(Image);
Vue.use(Toast);
Vue.use(Col);
Vue.use(Row);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(List);
export default {
    data(){
        return {
            list: [],
            page:1,
            count: 0,
            loading: false,
            isLoading: false,
            finished: false,
            error: false,
            head: '我的订单',
            exampleImg: exampleImg,
            opacity: 1,
            userInfo: JSON.parse(localStorage.getItem('userInfo')),
            info:{}
        }
    },
    methods: {
        onRefresh() {
            var this_ = this;
            this_.list = [];
            this_.page = 1;
            var data = {
                'user_id': this_.userInfo.id,
                'page': this_.page
            };
            this_.$api.main.GetOrderMine(data).then(res => {
                if (res.data.success){
                    for (let i = 0; i < res.data.data.data.length; i++) {
                        this_.list.push(res.data.data.data[i]);
                    }
                    this_.loading = false;
                    this_.isLoading = false;
                    this_.finished = true;
                }else {
                    Toast.fail('网络错误，请稍后重试！')
                }
            })
        },
        onLoad: function () {
            var this_ = this;
            if (this_.refreshing) {
                this_.list = [];
                this_.refreshing = false;
            }
            var data = {
                'user_id': this_.userInfo.id,
                'page': this_.page
            };
            this_.loading = true;
            this_.$api.main.GetOrderMine(data).then(res => {
                if (res.data.success){
                    for (let i = 0; i < res.data.data.data.length; i++) {
                        this_.list.push(res.data.data.data[i]);
                    }
                    this_.loading = false;
                    this_.page += 1;
                    if (res.data.data.data.length == 0) {
                        this_.finished = true;
                    }
                }else {
                    Toast.fail('网络错误，请稍后重试！')
                }
            })
        },
        detail: function () {
            this.$router.push('/product-detail')
        }
    },
    name: "car",
    components: {
        OrderSubmit
    }
}
</script>

<style scoped>
    .order-box{
        background: #f1a42a;
        border-radius: 0.35rem;
        padding: 1rem;
        color: rgba(255, 255, 255, 0.9);
        font-size: 13px;
    }
    .userInfo{
        border-bottom: 1px solid rgba(255, 255, 255, 0.44);
        margin-bottom: 0.5rem;
        padding-bottom: 0;
        display: flex;
        justify-content: space-between;
    }
    .user-left{
        display: flex;
        justify-content: space-around;
    }
    .avatar{
        margin-right: 0.5rem;
    }
    .description{
        font-size: 13px;
        color: rgba(255, 255, 255, 0.81);
        margin-top: 0;
        margin-bottom: 0;
    }
    .nickname{
        color: white;
        margin-bottom: 0 !important;
        margin-top: 0;
    }
</style>
